<template>
  <div class="content h-full w-full flex border-box">
    <div class="left-box border-box">
      <chart-map />
    </div>
    <div class="right-box flex-column h-full">
      <div class="left-top-box flex-1 border-box">
        <ChartBubble />
      </div>
      <div class="left-center-box flex-1 border-box">
        <ChartBar />
      </div>
      <div class="left-bottom-box flex-1 border-box">
        <chart-pile />
      </div>
    </div>
  </div>
</template>

<script>
import ChartBubble from './components/chart-bubble.vue';
import ChartMap from './components/chart-map.vue';
import ChartBar from './components/chart-bar.vue';
import ChartPile from './components/chart-pile.vue';

export default {
  components: { ChartBubble, ChartBar, ChartPile, ChartMap },
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {}
}
</script>

<style lang="scss" scoped>
.content{
  padding: 20px;
  background: #061d4d;
}
.left-box{
  width: 60%;
}
.right-box{
  width: 39%;
}
</style>


